{% extends "layout.html" %}

{% block content %}
<style>
    #ftpData .webPath,#ftpData .webNote,#ftpData .ftpStatus{
        white-space: nowrap;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: auto;
    }
</style>
<div class="main-content pb55">
    <div class="container-fluid">
        <div class="pos-box bgw mtb15">
            <div class="position f14 c9 pull-left">
                <a class="plr10 c4" href="/">{{data['lan']['H1']}}</a>/<span class="plr10 c4">{{data['lan']['H2']}}</span>
            </div>
            <div class="search pull-right">
                <form target="hid" onsubmit='ftp.get_list(1,$("#SearchValue").prop("value"))'>
                    <input type="text" id="SearchValue" class="ser-text pull-left" placeholder="{{data['lan']['SEARCH']}}" />
                    <button type="button" class="ser-sub pull-left" onclick='ftp.get_list(1,$("#SearchValue").prop("value"))'></button>
                </form>
                <iframe name='hid' id="hid" style="display:none"></iframe>
            </div>
        </div>
        <div class="safe bgw mtb15 pd15">
            <div class="info-title-tips">
                <p><span class="glyphicon glyphicon-alert" style="color: #f39c12; margin-right: 10px;"></span>{{data['lan']['PS']}} ftp://{{session['address']}}:{{session['port']}}</p>
            </div>
            <button onclick="ftp.add_user()" class="btn btn-success btn-sm" type="button">{{data['lan']['BTN1']}}</button>
            <button onclick="ftp.set_port()" class="btn btn-default btn-sm" type="button" style="margin-left:5px">{{data['lan']['BTN2']}}</button>
            <span style="float:right">     
                <button batch="true" style="float: right;display: none;margin-left:10px;" onclick="ftp.batch_ftp('del');" class="btn btn-default btn-sm">{{data['lan']['BTN3']}}</button>                
            </span>
            <div class="divtable mtb10">
                <div class="tablescroll">
                    <table id="ftpData" class="table table-hover" style="min-width: 700px;border: 0 none;">                 
                    </table>
                </div>
                <div class="dataTables_paginate paging_bootstrap page">
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script type="text/javascript">
	
	var ftp = {
		get_list:function(page,search){
            if (page == undefined) page = 1;
            if (!search) search = $("#SearchValue").val();
			bt.ftp.get_list(page,search,function(rdata){
				$('.dataTables_paginate').html(rdata.page);
				var _tab =  bt.render({
					table:'#ftpData',
					columns:[
						{ field:'id',type:'checkbox',width:30},
						{ field: 'name', title: lan.ftp.add_user,width:'20%'},
						{ field: 'password',width:'15%', title: lan.ftp.add_pass,templet : function(item){
							var _html = '<span class="password" data-pw="'+item.password+'">**********</span>';
							_html += '<span onclick="bt.pub.show_hide_pass(this)" class="glyphicon glyphicon-eye-open cursor pw-ico" style="margin-left:10px"></span>';
							_html += '<span class="ico-copy cursor btcopy" style="margin-left:10px" title="'+lan.ftp.copy+'" data-pw="'+item.password+'" onclick="bt.pub.copy_pass(\''+item.password+'\')"></span>';
							return _html;
						}},
						{ field: 'status', title: lan.ftp.status,templet:function(item){
							var _status = '<a class="ftpStatus" href="javascript:;" title="'+lan.ftp.ftp_user+'"';
							if(item.status=='1'){
								_status+=' onclick="ftp.stop_user('+item.id+',\''+item.name+'\') " >';
								_status+='<span style="color:#5CB85C">'+lan.ftp.start+' </span><span style="color:#5CB85C" class="glyphicon glyphicon-play"></span>';
							}
							else{
								_status+=' onclick="ftp.start_user('+item.id+',\''+item.name+'\')"';
									_status+='<span style="color:red">'+lan.ftp.stop+'  </span><span style="color:red" class="glyphicon glyphicon-pause"></span>';
							}
							return _status;
						},sort:function(){
							ftp.get_list();
						}},
						{ field: 'path', title: lan.ftp.add_path,templet:function(item){
							var _path = bt.format_path(item.path);							
							return '<a class="btlink webPath" title="'+lan.ftp.open_path+'" href="javascript:openPath(\''+_path+'\');">'+_path+'</a>';
						}},
						{ field: 'ps', title: lan.ftp.add_ps,templet : function(item){
							return "<span class='c9 input-edit webNote' onclick=\"bt.pub.set_data_by_key('ftps','ps',this)\">"+item.ps+ "</span>";
						}},
						{ field: 'opt',width:130, title: lan.ftp.operate,align:'right',templet:function(item){
							var option = "<a href=\"javascript:;\" class=\"btlink\" onclick=\"ftp.set_password("+item.id+",'"+item.name+"','"+item.password+"')\" title="+lan.ftp.change_pass+">"+lan.ftp.edit_pass+"</a> | ";
							option += "<a href=\"javascript:;\" class=\"btlink\" onclick=\"ftp.del("+item.id+",'"+item.name+"')\" title="+lan.ftp.del_ftp_title+">"+lan.ftp.del+"</a>";
							return option;
						}},
					],
					data:rdata.data
				});
				ftp.forSize();	
			});	
		},
		batch_ftp:function(type,arr,result){
			if(arr == undefined){
				arr = [];
				result = {count:0,error_list:[]};
				$('input[type="checkbox"].check:checked').each(function(){
					var _val = $(this).val();						
					if(!isNaN(_val)) arr.push($(this).parents('tr').data('item'));
				})	
				bt.show_confirm(lan.ftp.del_all,"<a style='color:red;'>"+lan.get('del_all_ftp',[arr.length])+"</a>",function(){							
					bt.closeAll();			
					ftp.batch_ftp(type,arr,result);
				});
				return;
			}
			var item = arr[0];
			switch(type){
				case 'del':					
					if(arr.length<1){
						ftp.get_list();
						bt.msg({msg:lan.get('del_all_ftp_ok',[result.count]),icon:1,time:5000});						
						return;
					}					
					bt.ftp.del(item.id,item.name,function(rdata){
						if(rdata.status){
							result.count+=1;
						}else{
							result.error_list.push({name:item.item,err_msg:rdata.msg});
						}
						arr.splice(0,1)
						ftp.batch_ftp(type,arr,result);
					})
					break;
			}
		},
		del:function(id,ftp_username){
			bt.show_confirm(lan.public.del+"["+ftp_username+"]",lan.get('confirm_del',[ftp_username]),function(){
				bt.ftp.del(id,ftp_username,function(rdata){
					if(rdata.status) ftp.get_list();
					bt.msg(rdata);
				})
			})
		},
		add_user:function(){
			bt.ftp.add(function(rdata){
				if(rdata.status) ftp.get_list();	
			})
		},
		set_password:function(id,name,password){
			var bs = bt.ftp.set_password(function(rdata){
				if(rdata.status) ftp.get_list();	
			})
			$('.id'+bs).val(id);
			$('.ftp_username'+bs).val(name);
			$('.new_password'+bs).val(password);
		},
		set_port:function(){
			var bs = bt.ftp.set_port(function(rdata){
				if(rdata.status) ftp.get_list();	
			})
			$('.port'+bs).val('{{session["port"]}}');
		},
		stop_user:function(id,username){
			bt.confirm({msg:lan.ftp.stop_confirm.replace('{1}',username),title:lan.ftp.stop_title},function(index){			
				bt.ftp.set_status(id,username,0,function(rdata){
					if(rdata.status) ftp.get_list();
				})
			})
		},
		start_user:function(id,username){
			bt.ftp.set_status(id,username,1,function(rdata){
				if(rdata.status) ftp.get_list();
			})
		},
		//浏览器窗口大小变化时调整内容宽度
		forSize:function(){
			var ticket_with = $('#ftpData').parent().width(),
			td_width = ticket_with*0.6-160-$('#ftpData th:eq(3)').width(),
			path_width = td_width/2 > $('#ftpData th:eq(4)').width() ? $('#ftpData th:eq(4)').width() : td_width/2;
			$('#ftpData .webPath').css('max-width',path_width);
			$('#ftpData .webNote').css('max-width',td_width-$('#ftpData .webPath').width());
		}
	}
	bt.set_cookie('sites_path',"{{session['config']['sites_path']}}");
	$(window).resize(function() {
		ftp.forSize();
	});
    {% if not data['isSetup'] %}
		layer.msg('{{data["lan"]["JS1"]}}<a href="/soft" style="color:#20a53a; float: right;">{{data["lan"]["JS2"]}}</a>',{icon:7,time:0,shade: [0.3, '#000']});
		$(".layui-layer-shade").css("margin-left", "180px");
    {% else %}
		ftp.get_list();
		
    {% endif %}	
</script>
{% endblock %}
